<template>
  <div>
    <h1>{{ title }}</h1>
    <h1>{{ getResult }}</h1>
    <button @click="changeState">更改state</button>
    <button @click="resetState">重置state</button>
  </div>
</template>
<script lang="ts" setup>
import { storeToRefs } from 'pinia'
import { useTextStore } from '@/store/index'

const vuex = useTextStore()
const { title, getResult } = storeToRefs(vuex)
/** 修改state有两种方式：在action中定义方法或使用$patch */
// const changeState = () => {
//   vuex.changeTitle()
// }
const changeState = () => {
  vuex.$patch((state) => {
    state.title = '我是小洋人'
    state.num = 100
  })
}
const resetState = () => {
  vuex.$reset()
}
</script>
